<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mustache插值语法(掌握)</title>
</head>
<body>
  <div id="app">
    <!--1. 基本使用-->
    <h2>{{ message }}</h2>
    <button @click="increase">+1</button>
    <button @click="decrease">-1</button>
    <button @click="reset">重置</button>
    <h2>当前计数: {{ counter }}</h2>
    <!--2. 表达式-->
    <h2>计数的双倍: {{ counter * 2 }}</h2>
    <h2>字符串{{ info }}按空格切割: {{ info.split(" ") }}</h2>
    <!--3. 三元运算-->
    <h2>{{ info.split(" ").length>3 ? "字符串长度大于3" : "字符串长度小于3" }}</h2>
    <!--调用methods里面的语句-->
    <h2>{{ useMethod("参数") }}</h2>
    <h2>{{ useMethod(dataInfo) }}</h2>
    <!-- <h2>{{ useMethod({{dataInfo}}) }}</h2> --> <!--错误写法  通过插值表达式（如 {{ }}）嵌套另一个插值表达式是不允许-->
    <!--5. 不能定义语句-->
    <!-- <h2>{{ const name = "why"; name }}</h2> -->
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 使用vue
    const app = Vue.createApp({
      data: function(){
        return {
          message: "Hello Mustache"
          , counter: 0
          , info: "how to use split"
          , dataInfo: "data"
        }
      }
      ,methods: {
        increase() {
          this.counter++
        }
        ,decrease() {
          this.counter--
        }
        ,reset() {
          this.counter=0
        }
        ,useMethod(data) {
          console.log("调用Method里面的语句,入参: "+data)
        }
      }
    }
    )
    // 挂载 
    app.mount("#app")
  </script>

</body>
</html>
